import React, { useCallback } from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { Image } from 'react-native'
import Images from '@IMAGE'
import { RouteProp } from '@react-navigation/core/lib/typescript/src/types'
import EStyleSheet from 'react-native-extended-stylesheet'
import { isIphoneX } from '@UTILS/Common'
// import useParams from '@HOOKS/useParams'
import Home from '../screens/home'
import Me from '../screens/me'
import { RootStackParamList, RouterKey } from './NavigationType'

const Tab = createBottomTabNavigator<RootStackParamList>()

function TabNavigator() {
  const tabBarIcon = (focused: boolean, routeName: string) => {
    // @ts-ignore
    const icon = Images.tab[`tab${routeName}${focused ? 'Focused' : 'Normal'}`]
    return (
      <Image source={icon} style={styles.tab} resizeMode="contain" />
    )
  }

  const screenOptions = useCallback(({ route }: {
    route: RouteProp<RootStackParamList>
  }) => {
    return ({
      tabBarActiveTintColor: '#333333',
      tabBarInactiveTintColor: '#8E8E93',
      tabBarLabelStyle: styles.tabBarLabelStyle,
      tabBarIcon: ({ focused }: { focused: boolean}) => tabBarIcon(focused, route.name),
    })
  }, [])

  return (
    <Tab.Navigator
      safeAreaInsets={{
        top: 0,
        right: 0,
        bottom: isIphoneX() ? 32 : 8,
        left: 0,
      }}
      // @ts-ignore
      initialRouteName={RouterKey.Home}
      screenOptions={screenOptions}
    >
      <Tab.Screen
        name={RouterKey.Home}
        component={Home}
        options={{
          title: '纳瑞维',
          tabBarLabel: '头痛治疗',
          headerTitleAlign: 'center',
          headerShadowVisible: false,
          headerStyle: {
            backgroundColor: '#F3F3F5',
          },
        }}
      />
      <Tab.Screen
        name={RouterKey.Me}
        component={Me}
        options={{
          headerShadowVisible: false,
          headerStyle: {
            backgroundColor: '#F3F3F5',
          },
          tabBarLabel: '个人中心',
          title: '',
        }}
      />
    </Tab.Navigator>
  )
}
export default TabNavigator

const styles = EStyleSheet.create({
  tab: {
    flex: 1,
    marginTop: 1,
    width: 32,
    height: 32,
  },
  tabBarLabelStyle: {
    fontSize: 11,
    lineHeight: 16,
  },
})
